<template>
	<view class="con">
		<view class="item">
			<view class="title">请填写个人身份信息</view>
			<view class="it">
				<view class="name">姓名</view>
				<input type="text" placeholder="填写真实姓名" placeholder-style="color:#999;font-size: 26rpx;"/>
			</view>
			<view class="it">
				<view class="name">身份证号码</view>
				<input type="text" placeholder="填写真实姓名" placeholder-style="color:#999;font-size: 26rpx;"/>
			</view>
			<view class="it">
				<view class="name">性别</view>
				<view class="sex">
					<view class="sexit" :class="{'active':sex==1}" @click="activeFn(1)">男</view>
					<view class="sexit" :class="{'active':sex==2}" @click="activeFn(2)">女</view>
				</view>
			</view>
			<view class="it">
				<view class="name">体重</view>
				<input type="text" placeholder="填写真实姓名" placeholder-style="color:#999;font-size: 26rpx;"/>
			</view>
		</view>
		<view class="item">
			<view class="title">请填写个人疾病信息</view>
			<view class="it">
				<view class="name">过往史</view>
				<view class="sex">
					<view class="sexit" :class="{'active':gflag==1}" @click="activeFn1(1)">有</view>
					<view class="sexit" :class="{'active':gflag==2}" @click="activeFn1(2)">无</view>
				</view>
			</view>
			<view class="it">
				<view class="name">过往病史</view>
				<view class="sex">
					<view class="sexit" :class="{'active':bflag==1}" @click="activeFn2(1)">有</view>
					<view class="sexit" :class="{'active':bflag==2}" @click="activeFn2(2)">无</view>
				</view>
			</view>
			<view class="it">
				<view class="name">肝功能</view>
				<view class="sex">
					<view class="sexit" :class="{'active':nflag==1}" @click="activeFn3(1)">有</view>
					<view class="sexit" :class="{'active':nflag==2}" @click="activeFn3(2)">无</view>
				</view>
			</view>
			<view class="it">
				<view class="name">肾功能</view>
				<view class="sex">
					<view class="sexit" :class="{'active':sflag==1}" @click="activeFn4(1)">有</view>
					<view class="sexit" :class="{'active':sflag==2}" @click="activeFn4(2)">无</view>
				</view>
			</view>
			<view class="it">
				<view class="name">其他疾病</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
		</view>
		<view class="btn" @click="toadd">
			完成
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				sex:1,//性别
				gflag:0,//过往
				bflag:0,
				nflag:0,
				sflag:0,
			}
		},
		methods:{
			activeFn(e){
				this.sex=e
			},
			activeFn1(e){
				this.gflag=e
			},
			activeFn2(e){
				this.bflag=e
			},
			activeFn3(e){
				this.nflag=e
			},
			activeFn4(e){
				this.sflag=e
			},
		}
	}
</script>

<style>
	.btn{
		width: 690rpx;
		height: 66rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 48rpx;
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
	}
	.title{
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #333333;
		opacity: 1;
	}
	.sexit{
		
		border-radius: 4px;
		width: 82rpx;
		height: 38rpx;
		background:  #F0F0F0;
		opacity: 1;
		border-radius: 4rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
		color: #999999;
	}
	.active{
		background-color:  #F09238;
		color: #FFFFFF;
	}
	.sex{
		display: flex;
		align-items: center;
	}
	input{
		text-align: right;
	}
	.it{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}
	.item{
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px rgba(149, 149, 149, 0.16);
		opacity: 1;
		border-radius: 8rpx;
		padding: 10rpx;
		margin-bottom: 50rpx;
	}
	.con{
		padding:30rpx;
		
	}
</style>
